<template>
  <div class="container">
    <!-- 页面标题和搜索 -->
    <div class="page-header">
      <h1 class="page-title">示例中心</h1>
      <div class="search-box">
        <input type="text" placeholder="搜索示例..." class="search-input">
        <button class="btn btn-primary">搜索</button>
      </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-section card">
      <div class="filter-group">
        <h3 class="filter-title">技术栈</h3>
        <div class="filter-tags">
          <span v-for="stack in techStacks" :key="stack" class="tag" :class="{ active: selectedStack === stack }"
            @click="selectedStack = stack">
            {{ stack }}
          </span>
        </div>
      </div>
      <div class="filter-group">
        <h3 class="filter-title">难度</h3>
        <div class="filter-tags">
          <span v-for="level in levels" :key="level" class="tag" :class="{ active: selectedLevel === level }"
            @click="selectedLevel = level">
            {{ level }}
          </span>
        </div>
      </div>
    </div>

    <!-- 示例列表 -->
    <div class="examples-grid">
      <div v-for="example in filteredExamples" :key="example.id" class="example-card card">
        <div class="example-header">
          <h3 class="example-title">{{ example.title }}</h3>
          <span class="example-difficulty" :class="example.difficulty">{{ example.difficulty }}</span>
        </div>
        <p class="example-desc">{{ example.description }}</p>
        <div class="example-techs">
          <span v-for="tech in example.techs" :key="tech" class="tag">{{ tech }}</span>
        </div>
        <div class="example-footer">
          <div class="example-meta">
            <span class="author">by @{{ example.author }}</span>
            <span class="date">{{ example.date }}</span>
          </div>
          <div class="example-actions">
            <button class="btn btn-primary">查看源码</button>
            <button class="btn btn-secondary">在线运行</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button class="btn btn-secondary" :disabled="currentPage === 1" @click="currentPage--">上一页</button>
      <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button class="btn btn-secondary" :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
    </div>
  </div>
</template>

<script setup>
const selectedStack = ref('')
const selectedLevel = ref('')
const currentPage = ref(1)
const totalPages = ref(5)

const techStacks = ['全部', 'Vue', 'React', 'Node.js', 'Go', 'Java', 'Python']
const levels = ['全部', '入门', '进阶', '高级']

const examples = [
  {
    id: 1,
    title: 'Vue3 组合式API实战',
    description: '使用Vue3组合式API实现一个完整的Todo应用，包含状态管理、路由等功能。',
    difficulty: '入门',
    techs: ['Vue3', 'TypeScript', 'Pinia'],
    author: 'jakechen',
    date: '2025-04-20'
  },
  {
    id: 2,
    title: 'React Hooks最佳实践',
    description: '深入讲解React Hooks的使用技巧和最佳实践，包含自定义Hook的实现。',
    difficulty: '进阶',
    techs: ['React', 'Hooks', 'TypeScript'],
    author: 'denglee',
    date: '2025-04-18'
  },
  {
    id: 3,
    title: 'Go微服务架构',
    description: '使用Go语言构建微服务架构，包含服务发现、负载均衡等核心功能。',
    difficulty: '高级',
    techs: ['Go', 'gRPC', 'Docker'],
    author: 'linzh',
    date: '2025-04-15'
  }
]

const filteredExamples = computed(() => {
  return examples.filter(example => {
    const stackMatch = !selectedStack.value || selectedStack.value === '全部' || example.techs.includes(selectedStack.value)
    const levelMatch = !selectedLevel.value || selectedLevel.value === '全部' || example.difficulty === selectedLevel.value
    return stackMatch && levelMatch
  })
})
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.example-card {
  display: flex;
  flex-direction: column;
}

.example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.example-title {
  font-size: 18px;
  font-weight: bold;
}

.example-difficulty {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.example-difficulty.入门 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.example-difficulty.进阶 {
  background-color: #fff7e6;
  color: #fa8c16;
}

.example-difficulty.高级 {
  background-color: #fff1f0;
  color: #f5222d;
}

.example-desc {
  color: var(--text-secondary);
  margin-bottom: 16px;
  flex: 1;
}

.example-techs {
  margin-bottom: 16px;
}

.example-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.example-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author {
  color: var(--primary-color);
  font-size: 14px;
}

.date {
  color: var(--text-secondary);
  font-size: 12px;
}

.example-actions {
  display: flex;
  gap: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.page-info {
  color: var(--text-secondary);
}

.tag.active {
  background-color: var(--primary-color);
  color: white;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .search-box {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .examples-grid {
    grid-template-columns: 1fr;
  }

  .example-footer {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .example-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 